<template>
  <div id="commonContent" v-loading="loading">
    <!--右侧的内容-->
    <div class="contentBox right">
      <!--右上的功能按钮-->
      <el-form :inline="true" :model="formInline" size="mini">
        <el-form-item label="接口名称" >
          <el-input v-model="formInline.name" class="put" style="width: 170px;" placeholder="接口名称"></el-input>
        </el-form-item>
        <el-form-item label="最新日期" >
          <el-date-picker v-model="formInline.date" align="right" type="date" placeholder="选择日期" style="width:170px;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="" >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
          <cloum @checkCall="checkCall" :checkbooks="checkList" style="margin-left: 30px" />
        </el-form-item>
      </el-form>

      <!--右下的内容展示-->
      <div class="contentItemBox">
        <!--内部内容的添加,手风琴做法-->
        <el-collapse v-model="activeNames" v-if="zyShow" @change="selectItem" accordion>
          <el-collapse-item :name="index" :key="index" v-for="(items,index) in contentList">
            <template slot="title">
              <span style="padding-left: 5px">{{items.siaoName + " (" + items.siaoCodeName + ")"}}</span>
            </template>
            <el-table :data="items.children" v-loading="isLoading">
              <el-table-column prop="siaName" v-if="checkList.indexOf('接口名称') >= 0" label="接口名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="siaHttpMethod" v-if="checkList.indexOf('请求方式') >= 0" label="请求方式"></el-table-column>
              <el-table-column prop="siaPath" v-if="checkList.indexOf('REST API') >= 0" label="REST API" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <div class="opt" @click="doBlack(scope.row,btnItem.btnIndex)" :key="btnIndex" v-for="(btnItem,btnIndex) in zyDataList">
                    <i v-if="btnItem.isIcon" :class="btnItem.iconName"></i>
                    <span v-else>{{btnItem.name}}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
        <div class="pageAtion">
          <el-pagination
            @size-change="handleCurrentChange"
            @current-change="handleSizeChange"
            :pager-count="pagerCount"
            :current-page="nowCount1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Cloum from './Cloum'
  export default{
    components:{
      Cloum
    },
    props:{
      zySid: {
        type: String,
        required: true
      },
      zyDataList: {
        type: Array,
        required: true
      },
    },
    data(){
      return {
        /*加载刷新*/
        loading: true,
        /*最大展示分页数*/
        pagerCount: 5,
        /*当前页码*/
        nowCount1: 1,
        /*当前分页尺寸*/
        pageSize1: 10,
        /*分页的总条数*/
        total1: 0,
        /*筛选项*/
        formInline: {
          name: "",
          date: "",
        },
        /*高亮的手风琴*/
        activeNames: [],
        /*保存内部的数据组号*/
        oldActiveNames: [],
        /*数据数据组*/
        contentList: [],
        zyShow: true,

        /*当前选择的id*/
        siId: "",
        checkList: ["接口名称","REST API","请求方式"],
        isLoading: true
      }
    },
    mounted(){
      /*代码初始化*/
      this.init()
    },
    methods:{
      checkCall(val) {
        this.checkList = val;
      },
      /*初始化*/
      init(){
        this.siId = this.zySid;
        this.getNavRight(this.siId)
      },
      /*获取右边的数据*/
      getNavRight(siId){
        this.loading = true;
        this.axiosGet('/center/owners?pageNum=' + this.nowCount1 + '&pageSize=' + this.pageSize1 + '&siId=' + siId,{},(rsp)=>{
          if(rsp.status){
            setTimeout(() => {
              this.loading = false;
            }, 500)
            /*进行列表的渲染*/
            this.contentList = rsp.data.list;
            this.total1 = rsp.data.total
          }
        });
      },
      /*手风琴打开时的方法操作*/
      selectItem(array){
        console.log(array);
        if (typeof(array) === "number") {
          this.getChickData(array);
        }
      },
      /*获取子集的数据*/
      getChickData(index){
        this.isLoading = true;
        let data  = this.contentList[index];
        this.axiosGet('/center/interfaces?siId=' + data.siId + '&siaoId=' + data.siaoId,{},(rsp)=>{
          setTimeout(() => {
            this.isLoading = false;
          }, 500)
          /*进行列表的渲染*/
          console.log(rsp);
          data.children = rsp.data.list;
          console.log(data);

          this.$nextTick(()=>{
            this.zyShow = false;
            this.zyShow = true;
          });
        });
      },
      /*分页方法*/
      handleSizeChange(val) {
        this.activeNames = [];
        /*改变当前页数*/
        this.nowCount1 = 1;
        /*改变分页尺寸*/
        this.pageSize1 = val;
        this.getNavRight(this.siId)
      },
      /*改变当前页数*/
      handleCurrentChange(val) {
        this.activeNames = [];
        this.nowCount1 = val;
        this.getNavRight(this.siId)
      },
      axiosGet(url,data,callback){
        this.axios.get("api"+url,{params: data}).then((rsp)=>{
          callback(rsp)
        })
      },
      /**子组件返回的方法**/
      doBlack(data,index){
        let obj = {
          data:data,
          fn: index,
        };
        this.$emit('doDataShow',obj);
      }
    },
  }
</script>


<style>

</style>

<style scoped>
#commonContent{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 15px;
}

#commonContent .contentBox{
  display: inline-block;
  vertical-align: top;
}
#commonContent .contentBox.right{
  width: 100%;
  height: 100%;
  position: relative;
}

#commonContent .right .contentItemBox{
  height: calc(100% - 46px - 32px - 15px);
  overflow-x: hidden;
}

#commonContent .right .pageAtion{
  text-align: right;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.opt{
  cursor: pointer;
  border: 0;
  background-color: transparent;
  outline: none;
  display: inline-block;
  margin-right: 10px;
}
</style>
